<template>
	<view class="babyWrapper">
		<u-radio-group v-model="defaultId">
			<view v-for="(item,key) in list" :key="key" class="babyItem" @click="itemClick(key)">
				<children-head-view :imgUrl="item.imgUrl" :gender="item.gender"></children-head-view>
				<view class="babyIntro">
					<view class="info">
						<view class="name">
							{{item.name}}
						</view>
						<view class="month">
							月龄：{{item.month}}个月
						</view>
					</view>
					<view class="area">{{item.areaName}}{{item.classNames ? ' · ' + item.classNames : ''}}</view>
				</view>
				<u-radio shape="circle" :name="item.id"></u-radio>
			</view>
		</u-radio-group>

		<view class="action-view">
			<x-button title="确认" @click="submitBaby"></x-button>
		</view>
	</view>
</template>

<script>
	import {
		getBabylist,
		setDefaultBaby
	} from '@/api/user.js'
	import {
		mapState
	} from 'vuex';
	import ChildrenHeadView from '@/components/children-head-view.vue'
	import XButton from '@/components/x-button.vue'
	export default {
		components: {
			ChildrenHeadView,
			XButton
		},
		computed: {
			...mapState({
				loginData: state => state.user.parentInfo,
			})
		},
		data() {
			return {
				defaultId: '',
				defaultBaby: {},
				list: [],
			}
		},
		onLoad() {
			this.getBaby();
		},
		methods: {
			getBaby() {
				const that = this;
				if (!this.loginData) {
					return
				};
				this.defaultId = this.loginData.defaultBabyId
				console.log(this.defaultId);
				getBabylist().then(res => {
					console.log(res);
					this.list = res.data;
				})
			},
			
			submitBaby() {
				const babyId = this.defaultId;
				setDefaultBaby(babyId).then(res => {
					console.log(res);
					this.$store.commit('user/setParentInfo', res.data);
					this.$router.go(-1)
				})
			},

			itemClick(index) {
				this.defaultId = this.list[index].id;
			}
		}
	}
</script>

<style lang="scss">
	.babyWrapper {
		margin-bottom: 64rpx;
		
	}

	.babyItem {
		width: 100%;
		border-bottom: 1rpx solid #e3e2fa;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		padding: 20rpx;
	}

	.babyIntro {
		flex: 1;
		margin-left: 20rpx;
		font-size: 26rpx;

		.info {
			display: flex;
			flex-direction: row;

			.month {
				margin-left: 10rpx;
			}
		}

		.area {
			margin-top: 10rpx;
		}
	}

	.action-view {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 100rpx;
		left: 0;
		right: 0;
	}
</style>
